<template>
	<view :data-theme="theme">
		<view class="address-window" :class="display == true ? 'on' : ''">
			<view class="title">
				请选择所在地区
				<text class="iconfont icon-guanbi" @tap="close"></text>
			</view>
			<view class="address-count">
				<view class="address-selected">
					<view v-for="(item, index) in selectedArr" :key="index" class="selected-list" :class="{ active: index === selectedIndex }" @click="change(item, index)">
						{{ item.regionName ? item.regionName : '请选择' }}
						<text class="iconfont icon-xiangyou"></text>
					</view>
					<view class="selected-list" :class="{ active: -1 === selectedIndex }" v-if="showMore" @click="change(-1, -1)">
						<text class="iconfont icon-xiangyou"></text>
						请选择
					</view>
				</view>
				<scroll-view scroll-y="true" :scroll-top="scrollTop" class="address-list" @scroll="scroll">
					<view v-for="(item, index) in addressList" :key="index" class="list" :class="{ active: item.regionId === activeId }" @click="selected(item, index)">
						<text class="item-name">{{ item.regionName }}</text>
						<text v-if="item.regionId === activeId" class="iconfont icon-duihao2"></text>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="mask" catchtouchmove="true" :hidden="display == false" @tap="close"></view>
	</view>
</template>

<script>
import { getCity } from '@/api/api.js';
const CACHE_ADDRESS = {};
let app = getApp();
export default {
	props: {
		display: {
			type: Boolean,
			default: true
		},
		address: {
			type: Array,
			default: []
		}
	},
	data() {
		return {
			theme: app.globalData.theme,
			active: 0,
			//地址列表
			addressList: [],
			selectedArr: [],
			selectedIndex: -1,
			is_loading: false,
			old: { scrollTop: 0 },
			scrollTop: 0,
			addressData: [],
			province: [],
			city: [],
			district: [],
			street: []
		};
	},
	computed: {
		activeId() {
			return this.selectedIndex == -1 ? 0 : this.selectedArr[this.selectedIndex].regionId;
		},
		showMore() {
			return this.selectedArr.length ? this.selectedArr[this.selectedArr.length - 1].isChild : true;
		}
	},
	watch: {
		address(n) {
			this.selectedArr = n ? [...n] : [];
		},
		display(n) {
			if (!n) {
				this.addressList = [];
				this.selectedArr = this.address ? [...this.address] : [];
				this.selectedIndex = -1;
				this.is_loading = false;
			} else {
				this.loadAddress(1, 1);
			}
		}
	},
	mounted() {
		this.loadAddress(1, 1);
	},
	methods: {
		loadAddress(parentId, regionType) {
			if (CACHE_ADDRESS[parentId]) {
				this.addressList = CACHE_ADDRESS[parentId];
				return;
			}
			let data = {
				parentId: parentId,
				regionType: regionType
			};
			this.is_loading = true;
			getCity(data).then((res) => {
				this.is_loading = false;
				CACHE_ADDRESS[parentId] = res.data;
				this.addressList = res.data;
			});
			this.goTop();
		},
		change(item, index) {
			if (this.selectedIndex == index) return;
			this.selectedIndex = index;
			this.loadAddress(item.parentId, item.regionType);
		},
		selected(item, index) {
			if (this.is_loading) return;
			if (this.selectedIndex > -1) {
				this.selectedArr.splice(this.selectedIndex + 1, 999);
				this.selectedArr[this.selectedIndex] = item;
				this.selectedIndex = -1;
			} else if (item.regionType === 1) {
				this.selectedArr = [item];
			} else {
				this.selectedArr.push(item);
			}
			if (item.isChild) {
				this.loadAddress(item.regionId, item.regionType + 1);
			} else {
				this.$emit('submit', [...this.selectedArr]);
				this.$emit('changeClose');
			}
			this.goTop();
		},
		close: function () {
			this.$emit('changeClose');
		},
		scroll: function (e) {
			this.old.scrollTop = e.detail.scrollTop;
		},
		goTop: function (e) {
			this.scrollTop = this.old.scrollTop;
			this.$nextTick(() => {
				this.scrollTop = 0;
			});
		}
	}
};
</script>

<style scoped lang="scss">
.address-window {
	background-color: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 101;
	border-radius: 30rpx 30rpx 0 0;
	transform: translate3d(0, 100%, 0);
	transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.address-window.on {
	transform: translate3d(0, 0, 0);
}
.address-window .title {
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	height: 123rpx;
	line-height: 123rpx;
	position: relative;
}
.address-window .title .iconfont {
	position: absolute;
	right: 30rpx;
	color: #8a8a8a;
	font-size: 35rpx;
}
.address-count {
	.address-selected {
		padding: 0 30rpx;
		margin-top: 10rpx;
		position: relative;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #f7f7f7;
	}
	.selected-list {
		font-size: 26rpx;
		color: #282828;
		line-height: 50rpx;
		padding-bottom: 10rpx;
		padding-left: 60rpx;
		position: relative;
		&.active {
			color: #e28d54;
		}
		&:before,
		&:after {
			content: '';
			display: block;
			position: absolute;
		}
		&:before {
			width: 4rpx;
			height: 100%;
			@include main_bg_color(theme);
			top: 0;
			left: 10rpx;
		}
		&:after {
			width: 12rpx;
			height: 12rpx;
			@include main_bg_color(theme);
			border-radius: 100%;
			left: 6rpx;
			top: 50%;
			margin-top: -8rpx;
		}
		&:first-child,
		&:last-child {
			&:before {
				height: 50%;
			}
		}
		&:first-child {
			&:before {
				top: auto;
				bottom: 0;
			}
		}
		.iconfont {
			font-size: 20rpx;
			float: right;
			color: #dddddd;
		}
	}
	scroll-view {
		height: 700rpx;
	}
	.address-list {
		padding: 0 30rpx;
		margin-top: 20rpx;
		box-sizing: border-box;
		.list {
			.iconfont {
				float: right;
				color: #ddd;
				font-size: 22rpx;
			}
			.item-name {
				display: inline-block;
				line-height: 50rpx;
				margin-bottom: 20rpx;
				font-size: 26rpx;
			}
			&.active {
				color: #e28d54;
				.iconfont {
					color: #e28d54;
				}
			}
		}
	}
}
</style>
